<template>
  <atom-overlay :show="show" @click="$emit('closeShow')" :style="{ top: `${top}px` }" :z-index="13">
    <slot>
      <div class="wrapper" @click.stop>
        <atom-checkbox-group :value="result" @input="$emit('updateResult', $event)">
          <atom-cell-group>
            <atom-cell v-for="item in selectOptions" :key="item.value" :title="item.label" clickable>
              <template #right-icon>
                <atom-checkbox :name="item.value"> </atom-checkbox>
              </template>
            </atom-cell>
          </atom-cell-group>
        </atom-checkbox-group>
      </div>
    </slot>
  </atom-overlay>
</template>

<script>
import { getDistanceFromTop } from '@/scripts/tools.js';
export default {
  props: {
    standardDom: {
      type: Object,
      default: () => ({}),
    },
    show: {
      type: Boolean,
      default: false,
    },
    placeDistance: {
      type: Number,
      default: 0,
    },
    // 选项参数
    selectOptions: {
      type: Array,
      default: () => [],
    },
    result: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      top: 0,
    };
  },
  watch: {
    show(nval) {
      let overflowStatus = 'auto';
      if (nval) {
        overflowStatus = 'hidden';
        this.top = getDistanceFromTop(this.standardDom) + this.placeDistance;
      }
      document.body.style.overflow = overflowStatus;
    },
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  padding: 0 12px;
  background-color: var(--bg-color-3);
  .atom-cell {
    padding: 26px 32px 25px;
  }
  .atom-cell::after {
    border: none;
  }
}
</style>
